<template>
  <transition name="el-zoom-in-center">
    <div class="cu-preview-main">
      <div class="cu-common-page-header">
        <el-page-header @back="goBack" :content="pageTitle" />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" :loading="loading" v-if="!isDetail">确 定</el-button>
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row :gutter="15" class="main" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255,0.6)">
        <el-form ref="elForm" :model="dataForm" label-width="100px" label-position="right" :disabled="!!isDetail" :rules="rules">
          <el-row :gutter="20" style="margin-top: 10px; margin-bottom: 10px;">
            <el-col :span="24">
              <el-alert class="commitment-alert" type="warning" title="重要提示" show-icon :closable="false">
                <el-form-item label-width="0" prop="commitment" style="margin-bottom:0">
                  <el-checkbox v-model="dataForm.commitment">
                    <strong>承诺声明：</strong>
                    本人已认真核对本表各项信息，承诺所填内容真实、完整，与实际情况一致，本人对填写内容的真实性负责。
                  </el-checkbox>
                </el-form-item>
              </el-alert>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 10px;">
            <el-col :span="6">
              <el-form-item label="回访时间" prop="followUpDate">
                <el-date-picker v-model="dataForm.followUpDate" type="datetime" placeholder="选择回访时间" format="yyyy-MM-dd HH:mm:ss" value-format="timestamp" :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="落地辅导日期">
                <el-date-picker v-model="dataForm.guidanceDates" type="dates" placeholder="暂无落地辅导日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开业日期">
                <el-date-picker v-model="dataForm.openingDate" type="date" placeholder="暂无开业日期" format="yyyy-MM-dd" value-format="timestamp" style="width: 100%" readonly />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 招生数据统计与托管招生收费 -->
          <el-col :span="24">
            <div class="detail-section">
              <div class="section-title">
                <i class="el-icon-data-analysis" style="color: rgb(103, 194, 58); margin-right: 6px;"></i>
                <strong style="color: rgb(103, 194, 58)">招生数据统计</strong>
              </div>

              <!-- 开业辅导前招生人数 -->
              <el-form-item label="落地辅导前招生情况" prop="enrollmentInfo" label-width="150px">
                <el-input v-model="dataForm.enrollmentInfo" placeholder="请输入落地辅导前招生情况" />
              </el-form-item>

              <div class="detail-section" style="background: #fff">
                <div class="section-title">
                  <i class="el-icon-money" style="color: #e6a23c; margin-right: 6px"></i>
                  <strong style="color: #e6a23c">托管招生与收费标准</strong>
                </div>

                <!-- 顶部统计区域 -->
                <div class="trusteeship-summary" style="display: flex">
                  <el-col :span="8">
                    <el-form-item label="托管总人数">
                      <el-input-number v-model="dataForm.totalCareCount" :min="0" placeholder="输入总人数" :style="{ width: '100%' }" readonly />
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="预计收入">
                      <el-input v-model="dataForm.expectedIncome" readonly placeholder="自动计算各项收费×人数总和" :style="{ width: '100%' }">
                        <template slot="append">
                          元/月
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </div>

                <!-- 托管服务项目（表格形式） -->
                <div class="other-services-section">
                  <div class="other-services-header">
                    <span class="other-services-title">托管服务项目</span>
                    <el-button type="primary" size="mini" @click.native.prevent="addCareService" icon="el-icon-plus">添加</el-button>
                  </div>

                  <div v-if="dataForm.careServices.length === 0" class="no-other-services">
                    <i class="el-icon-info"></i>
                    <span>暂无托管服务项目</span>
                  </div>

                  <el-table v-else :data="dataForm.careServices" border :size="'small'" style="width: 100%" :header-cell-style="{ whiteSpace: 'nowrap' }" :cell-style="{ whiteSpace: 'nowrap' }">
                    <el-table-column label="服务类型" align="center" :min-width="160">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.serviceCode" placeholder="请选择托管服务" filterable style="width:100%" @change="onCareServiceChange(scope.$index)">
                          <el-option v-for="opt in careServiceOptions" :key="opt.enCode" :label="opt.fullName" :value="opt.enCode" :disabled="isServiceTypeUsed(opt.enCode, scope.$index)" />
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="人数" align="center" :min-width="140">
                      <template slot-scope="scope">
                        <el-input-number
                          v-model="scope.row.studentCount"
                          :min="0"
                          :max="9999"
                          controls-position="right"
                          style="width: 100%;"
                          @change="
                            () => {
                              calculateMonthlyIncome()
                            }
                          "
                        />
                      </template>
                    </el-table-column>
                    <el-table-column label="服务收费" align="center" :min-width="220">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.fee" @input="formatCareServiceFee(scope.$index, $event)" placeholder="输入价格" style="width: 100%;" class="input-with-select">
                          <el-select v-model="scope.row.feeCycle" slot="prepend" placeholder="收费周期" @change="calculateMonthlyIncome">
                            <el-option label="按周收费" value="week"></el-option>
                            <el-option label="按月收费" value="month"></el-option>
                            <el-option label="按学期收费" value="semester"></el-option>
                          </el-select>
                          <template slot="append">
                            元
                          </template>
                        </el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="月收入" align="center" :min-width="160">
                      <template slot-scope="scope">
                        <span>
                          {{
                            (() => {
                              const count = Number(scope.row.studentCount || 0)
                              const fee = parseFloat(scope.row.fee || 0)
                              const cycle = scope.row.feeCycle || 'month'
                              const monthlyFee = cycle === 'semester' ? fee / 4.5 : cycle === 'week' ? fee * 4 : fee
                              return (monthlyFee * count).toFixed(2)
                            })()
                          }}
                          元
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" :min-width="120">
                      <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="removeCareService(scope.$index)" icon="el-icon-delete">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>

                <div class="section-divider"></div>

                <!-- 其他收费项目 -->
                <div class="other-services-section">
                  <div class="other-services-header">
                    <span class="other-services-title">其他收费项目</span>
                    <el-button type="primary" size="mini" @click.native.prevent="addOtherService" icon="el-icon-plus">添加</el-button>
                  </div>

                  <div v-if="dataForm.otherServices.length === 0" class="no-other-services">
                    <i class="el-icon-info"></i>
                    <span>暂无其他收费项目</span>
                  </div>

                  <el-table v-else :data="dataForm.otherServices" style="width: 100%" border size="small">
                    <el-table-column label="服务内容" align="center" :min-width="180">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.serviceName" placeholder="请输入服务内容" maxlength="50"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="招生人数" align="center" :min-width="140">
                      <template slot-scope="scope">
                        <el-input-number v-model="scope.row.studentCount" :min="0" :max="9999" controls-position="right" style="width: 100%;" @change="calculateMonthlyIncome" />
                      </template>
                    </el-table-column>
                    <el-table-column label="服务收费" align="center" :min-width="220">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.fee" placeholder="输入价格" style="width: 100%;" class="input-with-select">
                          <el-select v-model="scope.row.feeCycle" slot="prepend" placeholder="收费周期" @change="calculateMonthlyIncome">
                            <el-option label="按周收费" value="week"></el-option>
                            <el-option label="按月收费" value="month"></el-option>
                            <el-option label="按学期收费" value="semester"></el-option>
                          </el-select>
                          <template slot="append">
                            元
                          </template>
                        </el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="月收入" align="center" :min-width="160">
                      <template slot-scope="scope">
                        <span>
                          {{
                            (() => {
                              const count = Number(scope.row.studentCount || 0)
                              const fee = parseFloat(scope.row.fee || 0)
                              const cycle = scope.row.feeCycle || 'month'
                              const monthlyFee = cycle === 'semester' ? fee / 4.5 : cycle === 'week' ? fee * 4 : fee
                              return (monthlyFee * count).toFixed(2)
                            })()
                          }}
                          元
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" :min-width="120">
                      <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="removeOtherService(scope.$index)" icon="el-icon-delete">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 系统使用情况 -->
          <el-col :span="24">
            <div class="detail-section">
              <div class="section-title">
                <i class="el-icon-setting" style="color: #409eff; margin-right: 6px"></i>
                <strong style="color: #409eff">系统使用情况</strong>
              </div>
              <div class="system-stats">
                <div>
                  <div class="group-title">
                    <div class="bold-title">是否使用以下系统（使用请勾选）</div>
                  </div>
                  <div class="data-grid">
                    <el-checkbox-group v-model="dataForm.systemUsage">
                      <el-checkbox label="贝尔家校平台">贝尔家校平台</el-checkbox>
                      <el-checkbox label="全能数智平台">全能数智平台</el-checkbox>
                      <el-checkbox label="MaxAI错题宝">MaxAI错题宝</el-checkbox>
                      <el-checkbox label="AI智学平台">AI智学平台</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div class="data-grid" style="margin-top: 4px">
                    <el-input v-model="dataForm.otherSystem" placeholder="校区系统使用情况补充内容"></el-input>
                  </div>
                </div>
                <div>
                  <div class="group-title">
                    <div class="bold-title">
                      家校平台基础数据
                      <span>(当前数据由系统后台提供)</span>
                    </div>
                    <el-button type="text" size="mini" @click="loadSchoolZoneData" style="margin-left: 10px">
                      <i class="el-icon-refresh"></i>
                      刷新数据
                    </el-button>
                  </div>
                  <div class="data-grid border-title">
                    <div class="data-system-list">
                      <span>在职老师</span>
                      <span class="data-text">{{ dataForm.teacherCount || 0 }}人</span>
                    </div>
                    <div class="data-system-list">
                      <span>学生人数(家校系统)</span>
                      <span class="data-text">{{ dataForm.studentCount || 0 }}人</span>
                    </div>
                    <div class="data-system-list">
                      <span>学生人数(服务期)</span>
                      <span class="data-text">{{ dataForm.normalStudentNum || 0 }}人</span>
                    </div>
                    <div class="data-system-list">
                      <span>创建班级</span>
                      <span class="data-text">{{ dataForm.classCount || 0 }}个</span>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="group-title">
                    <div class="bold-title">
                      校区参训数据
                      <span>(当前数据由系统后台提供)</span>
                    </div>
                    <el-button type="text" size="mini" @click="loadTrainingData" style="margin-left: 10px">
                      <i class="el-icon-refresh"></i>
                      刷新数据
                    </el-button>
                  </div>
                  <div v-if="!dataForm.trainingData || dataForm.trainingData.length === 0" class="empty-data">
                    <i class="el-icon-info"></i>
                    <span>暂无参训数据</span>
                  </div>
                  <el-table v-else :data="dataForm.trainingData" v-loading="trainingDataLoading" style="width: 100%" border>
                    <el-table-column prop="trainTitle" label="师训名称"></el-table-column>
                    <el-table-column prop="teacherName" label="参训人员"></el-table-column>
                    <el-table-column prop="position" label="职务"></el-table-column>
                    <el-table-column prop="trainTime" label="参训时间" :formatter="custom.tableDateFormat"></el-table-column>
                    <el-table-column prop="isCompleted" label="是否结业">
                      <template slot-scope="scope">
                        <el-tag :type="scope.row.isCompleted ? 'success' : 'warning'">
                          {{ scope.row.isCompleted ? '已结业' : '未结业' }}
                        </el-tag>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 辅导反馈 -->
          <el-col :span="24">
            <div class="detail-section">
              <div class="section-title">
                <i class="el-icon-chat-dot-round" style="color: #f56c6c; margin-right: 6px"></i>
                <strong style="color: #f56c6c">辅导反馈</strong>
              </div>
              <div class="feedback-content">
                <el-form-item class="vertical-form-item" prop="problemsSolved" label-width="30px" label="">
                  <div class="vertical-label">1.本次辅导为校区梳理解决了哪些问题？</div>
                  <el-input type="textarea" v-model="dataForm.problemsSolved" placeholder="" :rows="4" maxlength="1000" show-word-limit :style="{ width: '100%' }" />
                </el-form-item>
                <el-form-item class="vertical-form-item" prop="currentProblems" label-width="30px" label="">
                  <div class="vertical-label">2.校区目前运营还有哪些问题？</div>
                  <el-input type="textarea" v-model="dataForm.currentProblems" placeholder="" :rows="4" maxlength="1000" show-word-limit :style="{ width: '100%' }" />
                </el-form-item>
                <el-form-item class="vertical-form-item" prop="hasOpeningCalendar" label-width="30px" label="">
                  <div class="vertical-label">3.校区是否有制作开业后一个月行事历？</div>
                  <el-radio-group v-model="dataForm.hasOpeningCalendar">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item class="vertical-form-item" prop="additionalContent" label-width="30px" label="">
                  <el-input v-model="dataForm.additionalContent" placeholder="请输入其他补充内容"></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
          <!-- 开业辅导师满意度评价 -->
          <el-col :span="24">
            <div class="detail-section">
              <div class="section-title">
                <i class="el-icon-star-on" style="color: #e6a23c; margin-right: 6px"></i>
                <strong style="color: #e6a23c">满意度评价</strong>
              </div>
              <div class="evaluation-stats">
                <!-- 满意度评价和综合评分 -->
                <div class="rating-section">
                  <div class="rating-item">
                    <div class="rating-label-container">满意度评价：</div>
                    <div class="rating-content">
                      <el-rate v-model="dataForm.satisfaction" :max="10" @change="onSatisfactionChange"></el-rate>
                      <span v-if="dataForm.satisfaction > 0" class="rating-text" :class="getSatisfactionLabelClass()">{{ getSatisfactionLabel() }}</span>
                    </div>
                  </div>
                  <div class="rating-item">
                    <div class="rating-label-container">综合评分：</div>
                    <div class="rating-content">
                      <span class="score-value">{{ dataForm.satisfaction * 10 }}分</span>
                      <span class="score-max">(满分100分)</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </transition>
</template>

<script>
export { default } from './index.js'
</script>

<style lang="scss" scoped>
@import url(index.scss);

.commitment-alert {
  margin-bottom: 10px;
}
.commitment-alert :deep(.el-alert__title) {
  font-weight: 700;
}
.commitment-alert :deep(.el-alert__content) {
  line-height: 1.6;
}

/* 托管服务项目和其他收费项目样式 */
.care-services-header,
.other-services-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.care-services-title,
.other-services-title {
  font-size: 16px;
  font-weight: bold;
}

.no-care-services,
.no-other-services {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background-color: #f8f8f8;
  border-radius: 4px;
  color: #909399;
}

.no-care-services i,
.no-other-services i {
  margin-right: 8px;
  font-size: 18px;
}

.section-divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 20px 0;
}

.cu-preview-main {
  height: 100%;
  overflow-y: auto;
  background-color: #f5f7fa;
  padding-bottom: 20px;

  .cu-common-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    margin-bottom: 15px;
  }

  .main {
    padding: 0 20px;
  }

  .section-card {
    margin-bottom: 20px;
    border-radius: 4px;

    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header-actions {
        margin-left: auto;
      }
    }
  }

  .filter-section {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
  }

  .chart-container {
    margin: 20px 0;
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  }

  .detail-section {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;

    .section-title {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
  }

  // 响应式设计
  @media screen and (max-width: 1200px) {
    .chart-container {
      height: 250px;
    }
  }

  @media screen and (max-width: 768px) {
    .chart-container {
      height: 200px;
    }
  }
}

/* ===== 评价横向布局与样式优化（等高与对齐修复） ===== */
.evaluation-stats {
  /* 满意度评价和综合评分样式 */
  .rating-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
  }

  .rating-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .rating-label-container {
    width: 100px;
    text-align: right;
    padding-right: 12px;
    font-size: 14px;
    color: #606266;
  }

  .rating-content {
    display: flex;
    align-items: center;
  }

  .rating-text {
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
  }

  .rating-text.label-very-satisfied {
    background-color: #67c23a;
  }

  .rating-text.label-satisfied {
    background-color: #409eff;
  }

  .rating-text.label-average {
    background-color: #e6a23c;
  }

  .rating-text.label-unsatisfied {
    background-color: #f56c6c;
  }

  .score-value {
    font-size: 16px;
    font-weight: bold;
    color: #409eff;
  }

  .score-max {
    margin-left: 5px;
    font-size: 12px;
    color: #909399;
  }

  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    i {
      color: #e6a23c;
      margin-right: 6px;
      font-size: 16px;
    }

    .card-title {
      font-weight: 600;
      font-size: 15px;
    }
  }

  .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .card-body.compact {
    padding: 0;
    margin-top: -5px;
  }

  .rating-pill {
    margin-top: 10px;
    display: flex;
    align-items: center;
    background-color: #f5f7fa;
    border-radius: 16px;
    padding: 4px 12px;
    border: 1px solid #e4e7ed;

    .rating-label {
      font-size: 14px;
      margin-right: 8px;

      &.excellent {
        color: #67c23a;
      }

      &.good {
        color: #409eff;
      }

      &.average {
        color: #e6a23c;
      }

      &.poor {
        color: #f56c6c;
      }
    }

    .rating-value {
      font-weight: 600;
    }
  }

  .score-highlight {
    display: flex;
    align-items: baseline;

    .score-number {
      font-size: 36px;
      font-weight: 700;
      color: #409eff;
    }

    .score-unit {
      font-size: 16px;
      margin-left: 4px;
      color: #606266;
    }
  }

  .score-meta {
    font-size: 12px;
    color: #909399;
    margin: 5px 0 10px;
  }

  .score-bar {
    width: 100%;
    height: 8px;
    background-color: #ebeef5;
    border-radius: 4px;
    overflow: hidden;

    .score-fill {
      height: 100%;
      background-color: #409eff;
      border-radius: 4px;
      transition: width 0.5s ease;
    }
  }
}
</style>
